<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.productNo"
            style="width: 150px;margin-right:15px;margin-top:7px"
            class="filter-item"
            placeholder="请输入产品编号"
      ></el-input>
      <!-- style="width: 150px;margin-right:15px;margin-top:7px" -->
      <el-input
            @keyup.enter.native="getData"
            clearable
            v-model="listQuery.produceName"
            style="margin-right: 15px;margin-top:7px"
            :style="{ width: inputWid(listQuery.produceName) }"
            class="filter-item"
            placeholder="请输入产品名称"
      ></el-input>
      <el-select
        v-model="listQuery.ecnImgUrl"
        placeholder="请选择QC是否上传凭证"
        lass="filter-item"
        style="margin-right:15px;margin-top:15px;width: 150px">
          <el-option
          :value="item"
          :label="item"
          v-for="(item,index) of this.statusList"
          :key="index"/>
        </el-select>
      <el-button style="margin-top:7px;" class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="产品编号"  prop="produceNo"   align="center"/>
      <el-table-column label="产品名称" prop='produceName' align="center" width="130px"/>
      <el-table-column label="版本号" prop='version' align="center"/>
      <el-table-column label="生效时间" prop='effectiveTime' align="center"/>
      <el-table-column show-overflow-tooltip label="描述" prop="ecnDesc" align="center" width="260px"/>
      <el-table-column label="规格" prop="specification" align="center" width="150px"/>
      <el-table-column label="创建时间"  prop="createTime" align="center"/>
      <el-table-column label="文档地址"  prop="ecnUrl" align="center" width="260px"/> 
      <el-table-column label="qc凭证路径"  prop="ecnImgUrl" align="center" width="260px"/> 
      <!-- 对ECN数据进行编辑与删除操作 -->
      <el-table-column  label="操作" align="center" width="200px">
        <template slot-scope="scope">
              <el-button v-if="!scope.row.ecnImgUrl && (userInfo.roleId == 0 || userInfo.roleId == 1 || userInfo.roleId == 14 || userInfo.roleId == 27 || userInfo.roleId == 36 || userInfo.roleId == 7)" size="mini" type="success" @click="addEC(scope.$index,scope.row)">添加EC凭证</el-button>
              <el-button v-if="userInfo.roleId == 0 || userInfo.roleId == 1 || userInfo.roleId == 14 || userInfo.roleId == 27 || userInfo.roleId == 36" size="mini" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
        <!-- 修改ECN信息弹出表单 -->
    <!-- <el-dialog title="ECN信息变更" :visible.sync="dialogFormVisible" width="700px">
    <el-form :model="modifyform">
      <el-form-item label="ecn变更ID" :label-width="formLabelWidth">
        <el-input v-model="modifyform.ecnChangeId" style="width:400px" disabled/>
      </el-form-item>
      <el-form-item label="版本" :label-width="formLabelWidth">
        <el-input v-model="modifyform.version" style="width:400px" />
      </el-form-item>
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="modifyform.produceName" style="width:400px" />
      </el-form-item>
      <el-form-item label="描述" :label-width="formLabelWidth">
        <el-input v-model="modifyform.ecnDesc" style="width:400px" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="modifyProcess">确 定</el-button>
    </div>
    </el-dialog> -->

    <el-dialog title="手动添加EC凭证" :visible.sync="ECshow" width="500px" @close="resetForm">
    <el-form ref="form" :model="ECform" :rules="rules">
      <el-form-item label="产品编号" prop="produceNo" :label-width="formLabelWidth">
        <el-input v-model="ECform.produceNo" style="width:250px" disabled/>
      </el-form-item>
      <el-form-item label="版本号" prop="version" :label-width="formLabelWidth">
        <el-input v-model="ECform.version" style="width:250px" disabled/>
      </el-form-item>
      <el-form-item label="工段编号" prop="sectionNo" :label-width="formLabelWidth">
        <el-input v-model="ECform.sectionNo" style="width:250px"/>
      </el-form-item>
      <el-form-item label="凭证" prop="ecnImgUrl" :label-width="formLabelWidth">
        <el-upload
          class="upload-demo"
          action="http://192.168.3.11:8086/technologyFile"
          :on-success="handlePdfSuccess"
          :on-remove = "removePdf"  
          :on-change= "pdfRemove"
          :headers="getHttpHeader"
          :before-upload="beforeFilsUpload"
          :limit="1"
          :file-list="fileList">
          <el-button :disabled="bool" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="ECshow = false">取 消</el-button>
      <el-button type="primary" @click="ESconfirm('form')">确 定</el-button>
    </div>
    </el-dialog>


   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
 
  </div>
</template>

<script>
import { getEcnChangePage, delEcnChange,ecnChangeFirstAdd, updateEcnChange } from '@/api/ECN.js'
import { checkWorkSecInfo } from '@/api/workSection.js'
export default {
  name:'ECNlist',
      data() {
        return {
          listQuery: {
              page: 1,
              limit: 10,
              productNo: '',                        //产品编号
              produceName: '',                       //产品名称
              ecnImgUrl: 'qc凭证未上传'                         //产品名称
          },
          statusList:['qc凭证已上传','qc凭证未上传'],
          total: 0,                                //返回信息总数
          formLabelWidth: '100px',                  //弹框内部组件的宽度设定
          dialogFormVisible: false,                 //变更弹窗显现条件
          ECshow: false,
          modifyform: {                             //ECN变更表单
            ecnChangeId: '',                        //只显示给用户看，input框为disable                   
            version: '',
            produceName: '',
            ecnDesc: ''
          },
          bool: false,
          getHttpHeader: {                    //上传文件的头
                Authorization: '',              //传输文件的token
                CHECK_USER_VALUE: 'GOLWAY',
                CHECK_PASSWORD_VALUE: '8D4DD3F80CEB6149329FDBD590B164F1'
            },
          ECform: {
            sectionNo:'',
            ecnImgUrl:'',
            ecnChangeId:'',
            produceNo:'',
            version:'',
          },
          fileList:[],  
          tableInfo: '',                             //table表单内容
          userInfo: this.$store.state.user.userInfo,
          rules: {
            sectionNo: [
                { required: true, message: '请输入工段编号', trigger: 'blur' },
                { pattern: /^[0-9]*$/, message: '每个字符都必须是0-9的数字', trigger: 'blur' },
              ],
            ecnImgUrl: [
                { required: true, message: '请选择文件', trigger: 'blur' }
              ],
            },
        }
      },
      computed: {
        inputWid() {
          return function (value) {
              if(!value || (value.length <= 10)){
                return '150px'
              } else {
                return (150 + (String(value).length-10)*6) + 'px'
              }
          }
        }
      },
      methods: {
        getData(){
          this.listQuery.page = 1
          this.handleFilter()
        },
        // 搜索按钮绑定的函数
        // 获取table表单数据与数据总数
        async handleFilter() {
          let query = Object.assign({},this.listQuery)
          if(query.ecnImgUrl == 'qc凭证已上传') {
            query.ecnImgUrl = '已上传'
          } else{
            delete query.ecnImgUrl
          }
          let {data} = await getEcnChangePage(query)
          this.tableInfo = data.records
          this.total = data.total
        },
        // 文件上传之前的函数，将token传入头中
        beforeFilsUpload(file) {
            this.getHttpHeader.Authorization = this.dealCookie()
        },
         // cookies的处理函数
         dealCookie() {
            const strcookie = document.cookie                     //获取cookie字符串
            const arrcookie = strcookie.split("; ")               //分割
            for ( var i = 0; i < arrcookie.length; i++) {
                const arr = arrcookie[i].split("=")
                if (arr[0] == "agent_Authorization") {
                    return arr[1]
                }
            }
            return ""
        },
        pdfRemove(e){
            if(e.status == 'fail') return this.$message.error("文件上传失败!")
            else if(e.status == 'success') return this.$message.success("文件上传成功!")
        },
        // 移除pdf
        async removePdf(file) {
          this.bool = false
          return this.ECform.ecnImgUrl = ''
        },
        // 上传PDF文档成功回调函数
        handlePdfSuccess(response) {
          this.bool = true
          this.ECform.ecnImgUrl = response.results
          console.log(1,this.ECform.ecnImgUrl)
        },
        // 提交ec凭证
        async ESconfirm(formName){
          this.$refs[formName].validate(async(valid) => {
            if (valid) {  
              let query1 = {
                sectionId: this.ECform.sectionNo,
                page: 1,
                limit: 10
              }
              const res = await checkWorkSecInfo(query1)
              if(!res.data.records.length) return this.$message.error('该工段号不存在！')
              console.log(res.data.records[0].status)
              if(res.data.records[0].status != 1) return this.$message.error('该工段是停用状态！')
              let query2 = {
                ecnChangeId: this.ECform.ecnChangeId,
                sectionNo: this.ECform.sectionNo,
                produceNo: this.ECform.produceNo,
                ecnImgUrl: this.ECform.ecnImgUrl,
                version: this.ECform.version
              }
                const data = await ecnChangeFirstAdd(query2)
                const errMsg = data.msg
                if(data.code == '500') return
                if(data.code != '1') return this.$message.error(errMsg)
                this.$message.success(errMsg)
                this.handleFilter()
                this.resetForm()
                this.ECshow = false
                this.fileList = []
                this.bool = false
            } else {
                return false
                }
            })
        },
        resetForm(){
          this.bool = false
          this.fileList = []
          this.ECform = {
            sectionNo:'',
            ecnImgUrl:'',
            ecnChangeId:'',
            produceNo:'',
            version:'',
          }
          this.$refs.form.resetFields()
        },
        // 添加ec凭证
        addEC(index,row){
          this.ECshow = true
          this.ECform = JSON.parse(JSON.stringify(row))
        },
        //删除ECN一行信息
        handleDelete(index,row) {
        this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
          let res = await delEcnChange({ecnChangeId: row.ecnChangeId})
          this.tableInfo.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
        this.listQuery.limit = val
        this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        }
      },
        // 进入页面获取table信息
      mounted() {
        this.handleFilter()
      }
}
</script>

<style>

</style>